import { NavigationProp, RouteProp } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { Divider, Text, View } from 'native-base';
import CustomFlatList from '../../../component/CustomFlatList.tsx';
import { StyleSheet } from 'react-native';
import { CommonStyle } from '../../../common/commonStyle.ts';
import UserRequest from '../../../request/userRequest.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';

interface IMemberBalanceProps {
  navigation: NavigationProp<any, 'memberBalance'>;
  route: RouteProp<any, 'memberBalance'>;
}

const MemberBalance: React.FC<IMemberBalanceProps> = ({ navigation, route }) => {
  const [data, setData] = useState<IListByCustomerRes[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  // 初次加载
  useEffect(() => {
    fetchMemberBalanceList();
  }, []);

  const fetchMemberBalanceList = () => {
    Loading.show('加载中');
    UserRequest.ListByCustomer({})
      .then((res) => {
        setData(res.data);
        Loading.hide();
      })
      .catch(() => Loading.hide());
  };

  const renderItem = (item: IListByCustomerRes) => {
    return (
      <View style={styles.card}>
        <View style={styles.title}>
          <Text fontWeight={'bold'}>{item.mainBusinessName}</Text>
          <View borderColor={CommonStyle.mainColor} borderWidth={1} paddingX={1}>
            <Text fontSize={12} color={CommonStyle.mainColor}>
              月结
            </Text>
          </View>
        </View>
        <Divider />
        <View style={styles.title}>
          <Text>余额</Text>
          <Text fontSize={15} fontWeight={'bold'} color={CommonStyle.mainColor}>
            ¥{item.balance}
          </Text>
        </View>
        <Divider />
        <View style={styles.title}>
          <Text width={100}>关联商户</Text>
          <Text flex={1} fontSize={13} color={CommonStyle.deepGrey}>
            {item.relationBusinessNames.replace(/,/g, '、')}
          </Text>
        </View>
      </View>
    );
  };

  return (
    <React.Fragment>
      <View style={styles.root}>
        <CustomFlatList style={{ paddingVertical: 16, paddingHorizontal: 12 }} data={data} renderItem={({ item }) => renderItem(item)} onEndReached={() => {}} isLoading={isLoading} noDataText="没有更多数据了" />
      </View>
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  root: { flex: 1 },
  card: { borderRadius: 8, backgroundColor: '#fff', marginBottom: 16, paddingHorizontal: 8, paddingVertical: 2 },
  title: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
});

export default MemberBalance;
